<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
    name: "ViewPerson.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;

            // 使用variable binding expression 来计算和显示人口密度。
            MapboxCommonService.setCZBP(map, [30.0222, -1.9596], 7);
            map.addLayer({
                'id': 'rwanda-provinces',
                'type': 'fill',
                'source': {
                    'type': 'geojson',
                    'data': `${window.location.origin}/mapbox/libs/mapbox/assets/rwanda-provinces.geojson`
                },
                'layout': {},
                'paint': {
                    'fill-color':
                        ["let", "density", ["/", ["get", "population"], ["get", "sq-km"]],
                            [
                                "interpolate",
                                ["linear"],
                                ["zoom"],
                                8,
                                [
                                    "interpolate",
                                    ["linear"],
                                    ["var", "density"],
                                    274,
                                    ["to-color", "#edf8e9"],
                                    1551,
                                    ["to-color", "#006d2c"]
                                ],
                                10,
                                [
                                    "interpolate",
                                    ["linear"],
                                    ["var", "density"],
                                    274,
                                    ["to-color", "#eff3ff"],
                                    1551,
                                    ["to-color", "#08519c"]
                                ]
                            ]
                        ],
                    'fill-opacity': .7
                }
            });
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
